/*
 * @Description: 开放字段列表组件
 * @Author: Rfan
 * @Date: 2022-03-08 15:54:50
 * @LastEditTime: 2022-12-30 10:03:53
 */

import { useEffect, useState } from 'react';
import { Tabs } from 'antd';
import classNames from 'classnames/bind';
import { useOpeningContext } from '../contexts/OpeningContext';
import ContentTitle from './ContentTitle';
import OpeningPane from './OpeningPane';
import styles from '../styles/list.module.scss';

const cx = classNames.bind(styles);

const { TabPane } = Tabs;

const PageContent = () => {
  const { selectAT, sortType, selectLevel, setSortType, clearSelectItems } = useOpeningContext();

  // 用于面板标题展示
  const [title, setTitle] = useState<string>('');
  // 传入面板选中的档案类型相关信息
  const [query, setQuery] = useState({});

  useEffect(() => {
    if (selectAT?.atType && (selectLevel?.level || selectLevel?.level === 0)) {
      setQuery({
        coordinate: {
          atType: selectAT.atType,
          atCode: selectAT.atCode,
          level: selectLevel.level
        }
      });
      setTitle(selectLevel?.levelName ? `${selectAT?.atName}-${selectLevel?.levelName} ` : '');
    }
  }, [selectAT, selectLevel]);

  /**
   * @description: 切换Tab方法，设置选中Tab，清空选中的条目
   * @param {string} key
   */
  const onTabChange = (key: string) => {
    console.log('tab change', key);
    setSortType(parseInt(key, 10));
    clearSelectItems();
  };

  return (
    <div className={cx('sort-container')}>
      <ContentTitle title={title} type={sortType} />
      <Tabs defaultActiveKey="1" onChange={onTabChange}>
        <TabPane tab="普通查询" key="1">
          <OpeningPane title={title} data={query} type={1} />
        </TabPane>
        <TabPane tab="检索" key="2">
          <OpeningPane title={title} data={query} type={2} />
        </TabPane>
      </Tabs>
    </div>
  );
};

export default PageContent;
